/* eslint-disable no-underscore-dangle */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import {
  Row, Col,Card, Form, Input, Button, Modal, Table, Icon, Popconfirm,
  Divider,Radio,DatePicker,Cascader,Select,
  Checkbox,
} from 'antd';
import moment from 'moment';

import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import styles from './companyPeople.less';
import ADDRESS_AREA_LIST from '../../utils/yjx_area.js';


const FormItem = Form.Item;
const RadioGroup = Radio.Group;// radio单选框
const { Option } = Select;
const CheckboxGroup = Checkbox.Group;


const getValue = obj =>
  Object.keys(obj)
    .map(key => obj[key])
    .join(',');

// 新增成员
const Createpeople = Form.create()(props => {
    const { modalVisible, form,handleGetCode, handleAddPeople, handleModalVisible,count } = props;
    const okHandle = () => {
      form.validateFields((err, fieldsValue) => {
        if (err) return;
        form.resetFields();
        handleAddPeople(fieldsValue);
      });
    };
    const okGetCode = () => {
      form.validateFields(["mobile"],(err, values) => {
        if (!err || !err.mobile){
          handleGetCode(values.mobile);
        }
      });
    };
    return (
      <Modal
        title="新建网红成员"
        visible={modalVisible}
        onOk={okHandle}
        onCancel={() => handleModalVisible()}
      >
        <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="手机号">
          {form.getFieldDecorator('mobile', {
            rules: [
              {
                required: true,
                message: 'Please enter mobile number!',
              },
              {
                pattern: /^1\d{10}$/,
                message: 'Wrong mobile number format!',
              },
            ],
          })(
            <Input size="large" className={styles.mobileStyle} prefix={<Icon type="mobile" className={styles.prefixIcon} />} placeholder="mobile number" />
          )}
        </FormItem>
        <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="验证码">
          <Row gutter={8}>
            <Col span={16}>
              {form.getFieldDecorator('verCd', {
                rules: [{
                  required: true,
                  message: 'Please enter Captcha!',
                }],
              })(
                <Input size="large" className={styles.captchaStyle} prefix={<Icon type="mail" className={styles.prefixIcon} />} placeholder="captcha" />
              )}
            </Col>
            <Col span={8}>
              <Button
                disabled={count}
                className={styles.getCaptcha}
                size="large"
                onClick={okGetCode}
              >
                {count ? `${count} s` : '获取验证码'}
              </Button>
            </Col>
          </Row>
        </FormItem>
        <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="备注">
          {form.getFieldDecorator('desc', {
            rules: [{ required: true, message: '请输入备注' }],
          })(<Input size="large" placeholder="请输入备注" />)}
        </FormItem>
      </Modal>
    );
});




// 用户详情
const UserInfo = Form.create()(props => {
  const {handleCancelUserModal,userInfoModalVisible,webReduserInfo,userId} = props;
  console.log(userId);

  const cars = [];// 平台资料集合
  const grd = [];//

  if (webReduserInfo && Object.keys(webReduserInfo).length>0){
    const tmp = webReduserInfo.platList ||[];
    const lab = webReduserInfo.label;
    // Object.keys(tmp[0]).map(key => console.log(tmp[0][key])); // 遍历对象

    for(const v of  tmp) {
      cars.push(
        <Col span={8}>
          <Card title={v.value} bordered={false}>
            <p>ID:{v.platId}</p>
            <p>粉丝数:{v.fansNum}</p>
            <p>获赞数:{v.likeNum}</p>
          </Card>
        </Col>);
    }

    for (const la of lab) {
      grd.push( <Card.Grid>{la.value}</Card.Grid>);
    }

    // for (let i = 0;i < count;i++) {
    //   cars.push(
    //     <Col span={8}>
    //       <Card title={tmp[i].value} bordered={false}>
    //         <p>ID:{tmp[i].platId}</p>
    //         <p>粉丝数:{tmp[i].fansNum}</p>
    //         <p>获赞数:{tmp[i].likeNum}</p>
    //       </Card>
    //     </Col>);
    // }
    // for(let i=0;i<labLen;i++){
    //   grd.push( <Card.Grid>{lab[i].value}</Card.Grid>);
    // }
  }

  return (

    <Modal
      title="用户详情"
      style={{top:'10px'}}
      visible={userInfoModalVisible}
      onCancel={() => handleCancelUserModal()}
      width='700px'
      className={styles.userinfo}
    >
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="手机号:">
        {
          webReduserInfo?<span>{webReduserInfo.mobile}</span>:<span>暂无</span>
        }
      </FormItem>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="备注:">
        <span>
          {
            webReduserInfo?<span>{webReduserInfo.desc}</span>:<span>--</span>
          }
        </span>
      </FormItem>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="性别:">
        <span>
          {
            webReduserInfo?<span>{webReduserInfo.gender}</span>:<span>未知</span>
          }
        </span>
      </FormItem>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="出生年份:">
        <span>
          {
            webReduserInfo?<span>{webReduserInfo.birth}</span>:<span>未知</span>
          }
        </span>
      </FormItem>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="所在地:">
        <span>
          {
            webReduserInfo?<span>{webReduserInfo.address}</span>:<span>未知</span>
          }
        </span>
      </FormItem>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="活跃平台资料:">
        <Row gutter={16} styles={{display:'inline'}}>
          {cars}
        </Row>
      </FormItem>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="擅长类型:">
        <Card type='inner' hoverable={false} bordered={false} className={styles.userInfoCard}>
          {grd}
        </Card>
      </FormItem>
    </Modal>
    );
});

// 编辑用户信息
const EditWebRedUserInfo = Form.create()(props => {
  const {
    handleCancelEditUserModal,
    editUserModalVisible,
    handleShowAddPlatModal,
    webReduserInfo,
    handelDelPlat,
    getWebRedUserPlat,
    userId,
    orgId,
    form,
    addPlatModalVisible,
    handleAddPlat,
    handleDoEditPlat,
    handleCancelShowAddPlat,
    editUserInfoHandel,
    webRedUserPlat,
  } = props;

  // 提交编辑网红资料信息
  const doEditWebRedUser = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      form.resetFields();

      const birth = new Date(fieldsValue.editBirth._d);// 格式化日期
      const parms = {
        'address':fieldsValue.editAddress.toString(),
        'phone':fieldsValue.editPhone.toString(),
        "birth_year":birth.getFullYear(),
        "birth_month":birth.getMonth()+1,
        "birth_day":birth.getDate(),
        'desc':fieldsValue.editDesc.toString(),
        'labs':fieldsValue.editLab.toString(),
        'mobile':fieldsValue.editPhone,
        'sex':fieldsValue.editSex,
        'userId':userId,
        'orgId':orgId,
      };
      editUserInfoHandel(parms);// 编辑网红资料
    });
  };

  // 取消显示编辑Modal
  const cancelEditModal = ()=>{
    form.resetFields();
    handleCancelEditUserModal();
  };


  // 删除平台资料
  const delPlat = (id)=>{
    const params = {
      'info_id':id,
      'userId':userId,
      'orgId':orgId,
    };
    handelDelPlat(params);
  };

  // 编辑平台资料
  const editPlatHandel = (id)=>{
    const params = {
      'cInfoId':id,
      'userId':userId,
      'orgId':orgId,
    };
    getWebRedUserPlat(params);// 获取单个用户平台资料
  };

  const cars = [];
  const grd = [];
  const userLab = [];// 用户标签
  let phone = '未知';// 手机号
  let desc = '--';// 备注描述
  let sex = 1;// 1表示男生 2表示女生 0表示未知 3表示嘿嘿
  let birth = '';// 出生年月日
  let labs = [];// 所有标签
  let addreIds = [];// 用户地址ID集合

  if (webReduserInfo  && webReduserInfo !=={} && webReduserInfo !=='undefined'
     && Object.keys(webReduserInfo).length>0){
    phone = webReduserInfo.mobile||'未知';
    desc = webReduserInfo.desc||'--';
    birth = webReduserInfo.birth||new Date();
    labs = webReduserInfo.labs||'';// 所有网红标签

    if (webReduserInfo.addreIds) {
        addreIds = webReduserInfo.addreIds.split(',');
        addreIds =  addreIds.map(Number);// 转数字数组
    }

    const label = webReduserInfo.label ||null;// 拿到用户已选标签
    if (label!=null && label.length>0){
      for (const va of label) {
        userLab.push(va.info_id);
      }
    }

    // Object.keys(tmp[0]).map(key => console.log(tmp[0][key])); // 遍历对象
    if(webReduserInfo.gender!==null) {
      switch(webReduserInfo.gender){
        case '男':sex = 1;break;
        case '女' :sex = 2;break;
        default: sex = 1;break;
      }
    }

    const tmp = webReduserInfo.platList;
    const lab = webReduserInfo.label;

    /* eslint-disable no-script-url */
    for (const v of tmp) {
      cars.push(
        <Col md={24} sm={24}>
          <Card
            title={`平台:${v.value}`}
            extra={
              <span>
                <a href="javascript:;" onClick={() =>editPlatHandel(v.cInfoId)}>编辑</a>
                <Divider type="vertical" />
                <Popconfirm title="是否确认删除?" onConfirm={() =>delPlat(v.infoId)}>
                  <a href="javascript:;">删除</a>
                </Popconfirm>
              </span>
            }
            bordered={false}
            style={{width:'200px'}}
          >
            <p>ID:{v.platId}</p>
            <p>粉丝数:{v.fansNum}</p>
            <p>获赞数:{v.likeNum}</p>
          </Card>
        </Col>);
    }

    for (const la of  lab) {
      grd.push( <Card.Grid>{la.value}</Card.Grid>);
    }

    /* eslint-disable no-script-url */
    // Object.keys(tmp[0]).map(key => console.log(tmp[0][key])); // 遍历对象
    // for (let i = 0;i < count;i++) {
    //   cars.push(
    //     <Col md={24} sm={24}>
    //       <Card
    //         title={`平台:${tmp[i].value}`}
    //         extra={
    //           <span>
    //             <a href="javascript:;" onClick={() =>editPlatHandel(tmp[i].cInfoId)}>编辑</a>
    //             <Divider type="vertical" />
    //             <Popconfirm title="是否确认删除?" onConfirm={() =>delPlat(tmp[i].infoId)}>
    //               <a href="javascript:;">删除</a>
    //             </Popconfirm>
    //           </span>
    //         }
    //         bordered={false}
    //         style={{width:'200px'}}
    //       >
    //         <p>ID:{tmp[i].platId}</p>
    //         <p>粉丝数:{tmp[i].fansNum}</p>
    //         <p>获赞数:{tmp[i].likeNum}</p>
    //       </Card>
    //     </Col>);
    // }
    // for(let i=0;i<labLen;i++){
    //   grd.push( <Card.Grid>{lab[i].value}</Card.Grid>);
    // }
  }

  const dateFormat = 'YYYY/MM/DD';
  const showPlat = ()=>{
    handleShowAddPlatModal();
  };

  // {`编辑用户信息:${state.visable}`}
  return (
    <Modal
      title="编辑用户信息"
      style={{top : '10px'}}
      visible={editUserModalVisible}
      onOk={doEditWebRedUser}
      onCancel={cancelEditModal}
      width='700px'
      maskClosable={false}
      className={styles.userinfo}
    >
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="手机号:">
        {form.getFieldDecorator('editPhone',{
          initialValue:phone,
        })
        (<Input size="small" disabled="true" />)}
      </FormItem>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="备注:">
        {form.getFieldDecorator('editDesc',{
          initialValue:desc,
        })
        (<Input size="default" />)}
      </FormItem>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="性别:">
        {form.getFieldDecorator('editSex',{
          initialValue:sex,
        })(
          <RadioGroup>
            <Radio value={1}>男</Radio>
            <Radio value={2}>女</Radio>
          </RadioGroup>
        )}
      </FormItem>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="出生年份:">
        {form.getFieldDecorator('editBirth',{
          initialValue:moment(birth, dateFormat),
        })
        (<DatePicker style={{width:'220px'}} format={dateFormat} />)}
      </FormItem>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="所在地:">
        {form.getFieldDecorator('editAddress',{
          initialValue:addreIds,
        })
        (<Cascader
          style={{width:'220px'}}
          options={ADDRESS_AREA_LIST}
        />)}
      </FormItem>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="活跃平台资料:">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }} styles={{display:'inline'}}>
          <Col md={24} sm={24}>
            <Button
              type="primary"
              size="small"
              style={{width:'120px'}}
              icon="plus-circle-o"
              onClick={showPlat}
            >
              添加平台资料
            </Button>
          </Col>
          {cars}
        </Row>
      </FormItem>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="擅长类型:" className={styles.labCheckCla}>
        {form.getFieldDecorator('editLab',{
          initialValue:userLab,
        })(<CheckboxGroup options={labs} />)}
      </FormItem>
      <CreatePlat
        addPlatModalVisible={addPlatModalVisible}
        handleAddPlat={handleAddPlat}
        handleDoEditPlat={handleDoEditPlat}
        handleCancelShowAddPlat={handleCancelShowAddPlat}
        userId={userId}
        orgId={orgId}
        webRedUserPlat={webRedUserPlat}
      />
    </Modal>
    );
});

// 绑定平台资料
const CreatePlat = Form.create()(props => {

  const {
    addPlatModalVisible,
    handleAddPlat,
    handleDoEditPlat,
    handleCancelShowAddPlat,
    userId,
    orgId,
    form,
    webRedUserPlat,
  } = props;

  let cInfoId = '';// 主键ID
  let infoId = "10401";// 平台info_id
  let platId = '';// 平台自己的ID  例如抖音ID
  let fansNum = '';// 粉丝数
  let likeNum = '';// 点赞数

  if (webRedUserPlat !== null && undefined !== webRedUserPlat) {
    cInfoId = webRedUserPlat.cInfoId||'';
    infoId = webRedUserPlat.infoId||'';
    platId = webRedUserPlat.platId||'';
    fansNum = webRedUserPlat.fansNum||'';
    likeNum = webRedUserPlat.likeNum||'';
  }

  // 提交平台资料
  const okHandleAddPlat = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      form.resetFields();

      const parms = {
        'fansNum':fieldsValue.fansNum,
        'likeNum':fieldsValue.likeNum,
        'plat':fieldsValue.plat,
        'platId':fieldsValue.platId,
        'userId':userId,
        'orgId':orgId,
        'cInfoId':cInfoId||0,
      };


     if (Number(cInfoId)>0){// 如果大于0则进行修改
       handleDoEditPlat(parms);// 修改
     } else {
       handleAddPlat(parms);// 新增
     }
    });
  };


  return (
    <Modal
      title="添加平台资料"
      visible={addPlatModalVisible}
      onOk={okHandleAddPlat}
      onCancel={() => handleCancelShowAddPlat()}
      maskClosable={false}
    >
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="活跃平台">
        {form.getFieldDecorator('plat',{
          rules: [{ required: true, message: '选择平台' }],
          initialValue:infoId,
        })
        (
          <Select>
            <Option value="10401">抖音</Option>
          </Select>
        )}
      </FormItem>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="平台ID*">
        {form.getFieldDecorator('platId', {
          rules: [{ required: true, message: '请输入平台ID' }],
          initialValue:platId,
        })(<Input size="default" placeholder="输入平台ID" />)}
      </FormItem>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="粉丝数量*">
        {
          form.getFieldDecorator('fansNum',{
            rules:[{ required: true, message: '请输入粉丝数量'}],
            initialValue:fansNum,
          })
          (<Input size="default" placeholder="输入粉丝数量" />)
        }
      </FormItem>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="获赞数量">
        {form.getFieldDecorator('likeNum',{
          initialValue:likeNum,
        })(
          <Input size="default" placeholder="输入获赞数量" />
        )}
      </FormItem>
    </Modal>
  );
});


@connect(({ rule, loading }) => ({
  rule,
  loading: loading.models.rule,
}))
@Form.create()// 创建表单 使得表单生效


export default class CompanyPeople extends PureComponent {

  state = {
    modalVisible: false,
    userInfoModalVisible: false,
    editUserModalVisible: false,
    addPlatModalVisible: false,
    formValues: {},
    userId:null,
    nickname:null,
    mobile:null,
    pageNum:0,
    count:0,
    orgId:null,
  };

  componentDidMount() {
    const { dispatch } = this.props;
    const { userId,nickname,mobile,pageNum } = this.state;
    dispatch({
      type: 'rule/getYjxOrgUserInfoList',
      payload: {userId,nickname,mobile,pageNum},
    });
  };

  // 请求获取用户信息
  getUserInfo = (userId,orgId) =>{
    const { dispatch } = this.props;
    if(userId === null || orgId === null){
      return;
    }
    const params = {
      'userId' : userId,
      'orgId' : orgId,
    };
    dispatch({
      type: 'rule/getWebRedUserInfo',
      payload: params,
    });
  };

  // 单个用户平台资料
  getWebRedUserPlat = (params) =>{
    const {dispatch} = this.props;
    dispatch({
      type: 'rule/getPlatInfo',
      payload: params,
    });
    this.setState({
      addPlatModalVisible:true,
    });
  };

    // 删除用户
  handleDelete = (key) => {
    const {dispatch} = this.props;
    const params = {
      userId:key,
    };
    dispatch({
      type: 'rule/removeYjxCoopUser',
      payload: params,
    });
  };


  handleModalVisible = flag => {
    this.setState({
      modalVisible: !!flag,
    });
  };

  // 取消显示用户详情
  handleCancelUserModal = () =>{
    this.setState({
      userInfoModalVisible: false,
      userId : null,
      orgId : null,
    });
  };

  // 显示用户详情modal
  handleUserInfo = (userId,orgId) => {
    this.setState({
      userInfoModalVisible: true,
    });
    this.getUserInfo(userId,orgId);
  };

  // 显示编辑Modal
  handleEditUserInfo = (userId,orgId) => {
    this.setState({
      editUserModalVisible:true,
      userId:userId||null,
      orgId:orgId||null,
    });
    this.getUserInfo(userId,orgId);
  };

  // 隐藏编辑modal
  handleCancelEditUserModal = () =>{
    this.setState({
      editUserModalVisible: false,
      userId : null,
      orgId : null,
    });
  };

  // 确认提交 编辑网红资料
  editUserInfoHandel = (params) =>{
    const { dispatch } = this.props;
    dispatch({
      type: 'rule/editWebRedUser',
      payload: params,
    });
    this.setState({
      addPlatModalVisible: false,
    });
  };

  // 添加平台
  handleAddPlat = (params) =>{
    const { dispatch } = this.props;
    dispatch({
      type: 'rule/addUserPlat',
      payload: params,
    });
    this.setState({
      addPlatModalVisible: false,
    });
  };

  // 添加平台
  handleDoEditPlat = (params) =>{
    const { dispatch } = this.props;
    dispatch({
      type: 'rule/editPlat',
      payload: params,
    });
    this.setState({
      addPlatModalVisible: false,
    });
  };

  // 显示添加平台资料modal
  handleShowAddPlatModal = () =>{
    this.setState({
      addPlatModalVisible: true,
    });
  };

  // 取消添加平台信息
  handleCancelShowAddPlat = () =>{
    this.setState({
      addPlatModalVisible: false,
    });
  };


  // 删除平台资料
  handelDelPlat = (parms) =>{
    const {dispatch} = this.props;
    dispatch({
      type: 'rule/removePlat',
      payload: parms,
    });
  };



  handleGetCode = mobile => {
    const { dispatch } = this.props;
    const s = /^1\d{10}$/;
    if(!s.test(mobile)){
      return;
    }
    dispatch({
      type: 'rule/GetCode',
      payload: {mobile},
    });
    let count = 59;
    this.setState({ count });
    this.interval = setInterval(() => {
      count -= 1;
      this.setState({ count });
      if (count === 0) {
        clearInterval(this.interval);
      }
    }, 1000);
  };


  handleStandardTableChange = (pagination, filtersArg, sorter) => {
    const { dispatch } = this.props;
    const { formValues,userId,nickname,mobile } = this.state;

    const filters = Object.keys(filtersArg).reduce((obj, key) => {
      const newObj = { ...obj };
      newObj[key] = getValue(filtersArg[key]);
      return newObj;
    }, {});

    this.setState({
      pageNum : pagination.current-1,
    });
    const params = {
      pageNum: pagination.current-1,
      pageSize: pagination.pageSize,
      ...formValues,
      userId,
      nickname,
      mobile,
      filters,
    };
    if (sorter.field) {
      params.sorter = `${sorter.field}_${sorter.order}`;
    }

    dispatch({
      type: 'rule/getYjxOrgUserInfoList',
      payload: params,
    });
  };

  handleFormReset = () => {
    const { form, dispatch } = this.props;
    form.resetFields();
    this.setState({
      modalVisible: false,
      userInfoModalVisible: false,
      editUserModalVisible: false,
      addPlatModalVisible: false,
      formValues: {},
      userId:null,
      nickname:null,
      mobile:null,
      pageNum:0,
      count:0,
    });
    dispatch({
      type: 'rule/getYjxOrgUserInfoList',
      payload: {
        userId:null,
        nickname:null,
        mobile:null,
        pageNum:0,
      },
    });
  };

  handleSearch = e => {
    e.preventDefault();

    const { dispatch, form } = this.props;

    form.validateFields((err, fieldsValue) => {
      if (err) return;

      this.setState({
        userId: fieldsValue.userId || null,
        nickname: fieldsValue.nickname || null,
        mobile: fieldsValue.mobile || null,
      });
      const { pageNum } = this.state;
      dispatch({
        type: 'rule/getYjxOrgUserInfoList',
        payload: { userId:fieldsValue.userId,mobile:fieldsValue.mobile,pageNum },
      });
    });
  };


  // 提交 新建网红账户
  handleAddPeople = fields => {
    const { dispatch } = this.props;
    this.setState({
      userId:null,
      nickname:null,
      mobile:null,
      pageNum:0,
      count:0,
    });
    dispatch({
      type: 'rule/addYjxCoopUserInfo',
      payload: {
        mobile01:fields.mobile,
        verCd:fields.verCd,
        desc:fields.desc,
        userId:null,
        nickname:null,
        mobile:null,
        pageNum:0,
      },
    });

    this.setState({
      modalVisible: false,
    });
  };

  // 筛选条件
  renderSimpleForm() {
    const { form } = this.props;
    const { getFieldDecorator } = form;
    return (
      <Form onSubmit={this.handleSearch} layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={6} sm={24}>
            <FormItem label="电话">
              {getFieldDecorator('mobile')(
                <Input placeholder="请输入手机号" />
              )}
            </FormItem>
          </Col>
          <Col md={6} sm={24}>
            <FormItem label="用户ID">
              {getFieldDecorator('userId')(
                <Input placeholder="请输入用户ID" />
              )}
            </FormItem>
          </Col>
          <Col md={6} sm={24}>
            <span className={styles.submitButtons}>
              <Button type="primary" htmlType="submit" icon="search">
                查询
              </Button>
              <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
                重置
              </Button>
            </span>
          </Col>
        </Row>
      </Form>
    );
  }

  render() {
    const {
      rule: { data },
      loading,
    } = this.props;

    const paginationProps = {
      showSizeChanger: true,
      showQuickJumper: true,
      ...data.pagination,
    };

    const {
      modalVisible,
      userInfoModalVisible,
      count,
      userId,
      orgId,
      editUserModalVisible,
      addPlatModalVisible,
    } = this.state;


    const columns = [
      {
        title: '用户id',
        dataIndex: 'user_id',
      },
      {
        title: '电话',
        dataIndex: 'mobile',
      },
      {
        title: '备注',
        dataIndex: 'org_r_desc',
      },
      {
        title: '创建时间',
        dataIndex: 'fmt_create_time',
      },
      {
        title: '更新时间',
        dataIndex: 'fmt_update_time',
      },
      {
        title: '操作',
        dataIndex: '',
        render: (text, record) => {
          return (
            <span>
              <a href="javascript:" onClick={() => this.handleUserInfo(record.user_id,30)}>详情</a>
              <Divider type="vertical" />
              <a href="javascript:" onClick={()=> this.handleEditUserInfo(record.user_id,30)}>编辑</a>
              <Divider type="vertical" />
              <Popconfirm title="是否确认删除?" onConfirm={() => this.handleDelete(record.key)}>
                <a href="javascript:">删除</a>
              </Popconfirm>
            </span>
          );
        },
      },
    ];


    // 新建用户
    const parentMethods = {
      handleGetCode:this.handleGetCode,
      handleAddPeople: this.handleAddPeople,
      handleModalVisible: this.handleModalVisible,
    };

    // 用户详情 父类方法
    const userInfoParentMethods = {
      handleCancelUserModal: this.handleCancelUserModal,
    };

    // 编辑用户信息 父类方法
    const editUseroParentMethods = {
      handleCancelEditUserModal: this.handleCancelEditUserModal,
      editUserInfoHandel: this.editUserInfoHandel,
      handleAddPlat : this.handleAddPlat,
      handleDoEditPlat : this.handleDoEditPlat,
      handleCancelShowAddPlat : this.handleCancelShowAddPlat,
      handleShowAddPlatModal : this.handleShowAddPlatModal,
      handelDelPlat : this.handelDelPlat,
      getWebRedUserPlat : this.getWebRedUserPlat,
    };


    return (
      <PageHeaderLayout>
        <Card bordered={false}>
          <div className={styles.tableList}>
            <div className={styles.tableListForm}>{this.renderSimpleForm()}</div>
            <div className={styles.tableListOperator}>
              <Button icon="plus" type="primary" onClick={() => this.handleModalVisible(true)}>
                新建
              </Button>
            </div>
            <Table
              loading={loading}
              dataSource={data.list}
              columns={columns}
              pagination={paginationProps}
              onChange={this.handleStandardTableChange}
            />
          </div>
        </Card>

        <Createpeople {...parentMethods} modalVisible={modalVisible} count={count} />
        <UserInfo
          {...userInfoParentMethods}
          userInfoModalVisible={userInfoModalVisible}
          userId={userId}
          webReduserInfo={data.webReduserInfo}
        />
        <EditWebRedUserInfo
          {...editUseroParentMethods}
          editUserModalVisible={editUserModalVisible}
          addPlatModalVisible={addPlatModalVisible}
          webReduserInfo={data.webReduserInfo}
          webRedUserPlat={data.webRedUserPlat}
          userId={userId}
          orgId={orgId}
        />
      </PageHeaderLayout>
    );
  }
}
